<template>
    <div class="page-wrap selection-page">
        <my-tab
                :fieldData="fieldData"
                :tabIndex="tabIndex"
                @changTabIndex="changTabIndex"
        ></my-tab>
        <select-table
                v-if="tabIndex == 0"
                :courseData="courseData"
                @selectCourse="selectCourse"
        >
        </select-table>
        <my-chart
                v-if="tabIndex == 1"
                :courseData="courseData"
        >
        </my-chart>
    </div>
</template>

<script>
    import SelectTable from '@/components/SelectionPage/SelectTable';
    import MyTab from '@/components/commons/Tabs';
    import MyChart from '@/components/SelectionPage/SelectChart'

    import dataOperate from '@/services';

    import { onMounted, computed, reactive, ref } from 'vue';
    import { useStore } from 'vuex';

    export default {
        name: "SelectionPage",
        components: {
            SelectTable,
            MyTab,
            MyChart
        },
        setup() {
            const store = useStore(),
                  state = store.state,
                  fieldData = reactive(['全部课程', '图表统计']);

            onMounted(() => {
                dataOperate(store, 'getData');
            });

            const selectCourse = (data) => {
                if (data.isSelected === 0) {
                    dataOperate(store, 'setCourseSelectType', data);
                    alert('选课成功！');
                }else {
                    alert('请勿重复选择！！！');
                }
            }

            const changTabIndex = (index) => {
                dataOperate(store, 'changTabIndex', index);
            }

            return {
                courseData: computed(() => state.courseData),
                selectCourse,
                fieldData,
                tabIndex: computed(() => state.tabIndex),
                changTabIndex
            }
        }
    }
</script>

<style scoped>

</style>